<template>
    <div>
        <NavTop></NavTop>
        <div class="common-layout">
            <el-container>
                <el-aside width="200px">
                    <NavLeft @handle="dadHandle"></NavLeft>
                </el-aside>
                <el-container>
                    <el-header>
                        <MySwiper></MySwiper>
                    </el-header>
                    <el-main>
                        <MyList :list="list1"></MyList>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>
<script>
import MySwiper from '../Home/components/MySwiper'
import NavLeft from '../Home/components/NavLeft'
import MyList from '../Home/components/MyList'
import NavTop from '../../components/NavTop'

import axios from 'axios'

export default {
    components: {
        NavTop,
        NavLeft,
        MySwiper,
        MyList
    },
    mounted() {
        axios.get('goodslist.json').then(res => {
            this.list = res.data.goodslist,
            this.list1=this.list
        })
    },
    methods: {
        dadHandle(val) {
            this.list1 = this.list.filter(v => v.cid == val)
        }
    },
    data() {
        return {
            list: [],
            list1: []
        }
    }
}
</script>
<style>
.el-header {
    --el-header-padding: 0 !important;
    height: 300px !important;
}
</style>